<template>
   <div class="">
       <div class="popular-container">
           <div class="popular-area">
               <div class="title"><span>精选爆款</span></div>
               <div class="popular-content">
                   <div class="popular-items">
                       <div class="popular-item">
                           <span class="text1">爆款树脂</span>
                           <span class="text2">爆款树脂发布</span>
                           <span class="text3">爆款树脂</span>

                       </div>
                       <div class="popular-item">
                           <span class="text1">爆款树脂</span>
                           <span class="text2">爆款树脂发布</span>
                           <span class="text3">爆款树脂</span>

                       </div>
                       <div class="popular-item">
                           <span class="text1">爆款树脂</span>
                           <span class="text2">爆款树脂发布</span>
                           <span class="text3">爆款树脂</span>

                       </div>
                      <div class="popular-item">
                           <span class="text1">爆款树脂</span>
                           <span class="text2">爆款树脂发布</span>
                           <span class="text3">爆款树脂</span>

                       </div>
                       <div class="popular-item">
                           <span class="text1">爆款树脂</span>
                           <span class="text2">爆款树脂发布</span>
                           <span class="text3">爆款树脂</span>

                       </div>
                      <div class="popular-item">
                           <span class="text1">爆款树脂</span>
                           <span class="text2">爆款树脂发布</span>
                           <span class="text3">爆款树脂</span>

                       </div>
                   </div>
               </div>
               <div class="see-more"><span>查看更多</span></div>
           </div>
       </div>
   </div>
</template>

<script>
export default {
   name: 'PopularGoods',
   data() {
       return {}
   },
  components: {}
}
</script>

<style scpoed lang="less">
    .popular-container{
        margin-top: 0.3rem;
        width: 100%;
        background: #ffffff;
        .popular-area{
            margin: 0 auto;
            width: 7.1rem;
            height: 5.5rem;
            position: relative;
            
            .title{
                width: 100%;
                height: 0.6rem;
                 text-align: center;
                background-color:  #cca53f;
                position: absolute;
                top: 0;
                span{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    color: #ffffff;
                    font-size: 0.24rem;
                }
            }
            .popular-content{
                 position: absolute;
                 top: 0.6rem;
                width: 100%;
                background-color: #fdfcfc;
                .popular-items{
                    margin: 0 auto;
                    height: 4.1rem;
                    width: 6.62rem;
                    display: flex;
                    justify-content: space-between;
                    align-content: space-between;
                    flex-wrap: wrap;
                    .popular-item{
                        height: 1.3rem;
                        width: 2.82rem;
                        border-bottom: 1px solid #f3f4f6;
                        position: relative;
                        .text1{
                            font-size: 0.27rem;
                            color: #333333;
                            position: absolute;
                            top: 0.3rem;
                            left: 0.3rem;
                        }
                        .text2{
                            font-size: 0.22rem;
                            color: #bbbbbb;
                            position: absolute;
                            left: 0.3rem;
                            bottom: 0.22rem;
                        }
                        .text3{
                            font-size: 0.22rem;
                            color: #bbbbbb;
                            position: absolute;
                            right: 0;
                            bottom: 0.22rem;
                        }
                    }

                }
            }
            .see-more{
                width: 100%;
                height: 0.8rem;
                background: #fdfcfc;
                text-align: center;
                position: absolute;
                bottom: 0;
                span{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    font-size: 0.24rem;
                    color: #cca53f;
                }
            }

        }
    }
</style>
